<template>
    <view class="component">
        <view class="h-order" @click="popFn(1)">
	        <image :src="`${masterDomain}/static/images/header_la.png?v=${imgVersion}`" mode="aspectFit" class="ho-more"></image>
		    <view v-if="msgData.total>0" class="ho-message">
			    <image :src="`${masterDomain}/static/images/dot.png?v=${imgVersion}`" mode="aspectFit"></image>
		    </view>
	    </view>
        <!-- 头部弹窗 -->
		<view class="order" v-show="popb" @click="popFn(0)">
			<view class="o-content"
				:style="`transform:translateY(${popconb?'0%':'-100%'});padding:${appBoolean?'108rpx':'48rpx'} 0rpx 40rpx`"
				@click.stop>
				<view class="oc-title">
					<text>全局导航</text>
					<image :src="`${masterDomain}/static/images/close_2.png?v=${imgVersion}`" mode="aspectFit"
						@click="popFn(0)"></image>
				</view>
				<view class="oc-all">
					<view class="item" @click="linkTo(masterDomain)">
						<image :src="`${masterDomain}/static/images/top_fast1.png?v=${imgVersion}`" mode="aspectFit">
						</image>
						<text>首页</text>
					</view>
					<view class="item" @click="linkTo(`${globalData.appConfig.cfg_user_index}/message.html`)">
						<image :src="`${masterDomain}/static/images/top_fast2.png?v=${imgVersion}`" mode="aspectFit">
						</image>
						<text>消息</text>
						<view class="mgs" v-if="msgData.total>0">{{msgData.total}}</view>
					</view>
					<view class="item" @click="linkTo(`${globalData.appConfig.cfg_user_index}?appFullScreen`)">
						<image :src="`${masterDomain}/static/images/top_fast3.png?v=${imgVersion}`" mode="aspectFit">
						</image>
						<text>会员中心</text>
					</view>
					<view class="item" @click="shareFn(1)">
						<image :src="`${masterDomain}/static/images/top_fast5.png?v=${imgVersion}`" mode="aspectFit">
						</image>
						<text>分享</text>
					</view>
				</view>
				<!-- #ifdef H5  -->
				<view class="oc-nav" @touchmove.stop @touch.stop>
				<!-- #endif  -->
				<!-- #ifndef H5  -->
				<view class="oc-nav">
				<!-- #endif  -->
					<view class="item" v-for="(item,index) in moduleData" :key="index" @click="linkTo(item.url)">
						<image :src="item.icon" mode="aspectFit"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="oc-bg"></view>
				<view class="oc-bar"></view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<view class="sharePop" v-if="shareb" @click="shareFn(0)">
			<view class="s-content" :style="`transform:translateY(${shareconb?'0%':'100%'})`" @click.stop>
				<view class="sc-title">分享</view>
				<view class="sc-way" v-if="!webdyMini">
					<block v-for="(item,index) in shareItem" :key="index">
						<view class="item" @click="item.fn" v-if="item.need">
							<view>
								<image :src="item.src" mode="aspectFit"></image>
							</view>
							<text>{{item.title}}</text>
						</view>
					</block>
				</view>
				<view class="sc-operate">
					<block v-for="(item,index) in shareOperate" :key="index">
						<view class="item" @click="item.fn">
							<view>
								<image :src="item.src" mode="aspectFit"></image>
							</view>
							<text>{{item.title}}</text>
						</view>
					</block>
				</view>
			</view>
			<!-- 复制成功 -->
			<view class="c-warn" v-if="copySuccessb" @click.stop>
				<view class="title">已复制链接</view>
				<view class="tip">快去粘贴给好友吧</view>
				<view class="btn" @click="shareFn(0)">我知道了</view>
			</view>
		</view>
		<!-- 扫码弹窗 -->
		<view class="qrCode" @click="qrCodeFn(0)" v-if="qrb">
			<view class="q-content" :style="`transform:translateY(${qrconb?'0%':'100%'})`" @click.stop>
				<view class="qc-img">
					<image :src="`${masterDomain}/include/qrcode.php?data=${shareLink}`" mode="aspectFit"></image>
					<text>让朋友扫一扫访问当前网页</text>
				</view>
				<view class="qc-btn" @click.stop="qrCodeFn(0)">取消</view>
			</view>
		</view>
		<!-- 微信分享 -->
		<view class="wxShare" v-if="wxshareb" @click="wxshareb=false">
			<image :src="`${masterDomain}/static/images/HN_Public_sharezhi.png?v=${imgVersion}`" mode="aspectFit">
			</image>
		</view>
		<view class="safari" v-if="safarib" @click="safarib=false">
			<image :src="`${masterDomain}/static/images/safariShare.png?v=${imgVersion}`" mode="aspectFit">
			</image>
		</view>
    </view>
</template>
<script>
	/*
	 注意：此组件仅用于h5，禁止将此组件兼容其他平台(APP除外)！
	 1.appShare:app原生分享配置
	 2.needPoster：是否需要开启海报按钮，事件在父组件触发，这里面不做处理
	 3.@poster:告诉父组件点击了海报按钮
	*/
    let app = getApp();
    export default {
        props:{
            shareInfo: {
				type: Object,
				default: {},
			},
            needPoster: { //是否需要开启海报按钮
				type: Boolean,
				default: false,
			},
            appShare: {
				type: Object,
				default: {
					description: '',
					litpic: '',
					title: ''
				}
			},
        },
        data() {
            return {
                globalData:app.globalData,
                masterDomain: app.globalData.masterDomain,
				imgVersion: app.globalData.imgVersion,
                webdyMini: app.globalData.webdyMini,
                msgData: {},
                moduleData:{},
                appBoolean: false,
                popb: false,
				popconb: false,
                shareb: false, //分享弹窗
				shareconb: false,
                copySuccessb: false,
                qrb: false, //二维码弹窗
				qrconb: false,
                wxshareb: false, //微信分享
                safarib: false, //safari浏览器
                shareItem: [{
						id: 1,
						title: '生成海报',
						src: `${app.globalData.imgPath}/article/poster.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: false
					},
					{
						id: 2,
						title: '微信好友',
						src: `${app.globalData.imgPath}/article/wechat.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: true
					},
					{
						id: 3,
						title: '朋友圈',
						src: `${app.globalData.imgPath}/article/friends.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: true
					},
					{
						id: 4,
						title: '微博',
						src: `${app.globalData.imgPath}/article/weibo.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: true
					},
					{
						id: 5,
						title: 'QQ好友',
						src: `${app.globalData.imgPath}/article/QQ.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: true
					},
					{
						id: 6,
						title: 'QQ空间',
						src: `${app.globalData.imgPath}/article/QQspace.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: true
					}
				],
				shareOperate: [{
						id: 7,
						title: '复制链接',
						src: `${app.globalData.imgPath}/article/link.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: true
					},
					{
						id: 8,
						title: '当面扫码',
						src: `${app.globalData.imgPath}/article/2Dcode.png?v=${app.globalData.imgVersion}`,
						fn: '',
						need: true
					}
				],
            }
        },
        mounted() {
            let _this = this;
			let timer;
			this.getModuleNav();
			this.massageFn();
			let url = this.shareInfo.url ? this.shareInfo.url : window.location.href;
			let fromShare = app.globalData.userid ? 'fromShare=' + app.globalData.userid : '';
			this.shareLink = `${url}${url.includes('?')?'&':'?'}${fromShare}`;
			this.appBoolean = window.appBoolean;
			document.querySelector('link[rel="canonical"]').setAttribute('href', _this.shareLink);
			let device = navigator.userAgent.toLowerCase(); // 这里将所有字母转小写
			let isSafari = device.indexOf('safari') !== -1 && device.indexOf('browser') === -1 && device.indexOf(
				'android') === -1;
			// 更多事件绑定
			for (let i = 0; i < this.shareItem.length; i++) {
				let id = this.shareItem[i].id;
				switch (id) {
					case 1: { // 海报
						this.shareItem[i].need = this.needPoster; //是否要显示海报按钮
						this.shareItem[i].fn = () => {
							this.$emit('poster', 1);
							this.shareFn(0);
						}
						break;
					}
					case 2: { //微信
						this.shareItem[i].fn = () => {
							if (this.appBoolean) {
								shareApp('weixin');
							} else if (app.globalData.webWeixin) {
								this.wxshareb = true;
								_this.shareFn(0);
							} else { //普通浏览器
								webShare();
							}
						}
						break;
					}
					case 3: {
						this.shareItem[i].fn = () => {
							if (this.appBoolean) {
								shareApp('weixin');
							} else if (app.globalData.webWeixin) {
								this.wxshareb = true;
								_this.shareFn(0);
							} else { //普通浏览器
								webShare();
							}
						}
						break;
					}
					case 4: { //微博
						this.shareItem[i].fn = () => {
							if (this.appBoolean) {
								shareApp('weibo');
							} else {
								this.linkTo(
									`http://service.weibo.com/share/share.php?url=${encodeURIComponent(this.shareLink)}`
								);
							}
						}
						break;
					}
					case 5: { //QQ好友
						this.shareItem[i].fn = () => {
							if (this.appBoolean) {
								shareApp('qq');
							} else if (app.globalData.webWeixin) {
								this.wxshareb = true;
								_this.shareFn(0);
							} else { //普通浏览器
								webShare();
							}
						}
						break;
					}
					case 6: { //QQ空间
						this.shareItem[i].fn = () => {
							if (this.appBoolean) {
								shareApp('qzone');
							} else {
								this.linkTo(
									`http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${encodeURIComponent(this.shareLink)}`
								);
							}
						}
						break;
					}
				}
			}
			for (let i = 0; i < this.shareOperate.length; i++) {
				let id = this.shareOperate[i].id;
				switch (id) {
					case 7: { //复制链接
						this.shareOperate[i].fn = () => {
							uni.setClipboardData({
								data: this.shareLink,
								success: res => {
									uni.hideToast();
									_this.copySuccessb = true; //弹窗
								}
							})
							_this.shareconb = false;
						};
						
						break;
					}
					case 8: { //当面扫码
						this.shareOperate[i].fn = () => {
							this.qrCodeFn(1);
						}
						break;
					}
				}
			}
			// 更多事件绑定
			function shareApp(id) {
				window.setupWebViewJavascriptBridge(function(bridge) {
					bridge.callHandler("appShare", {
						"platform": id,
						"url": _this.shareLink,
						"title": _this.appShare.title,
						"imageUrl": _this.appShare.litpic,
						"summary": _this.appShare.description
					}, function(responseData) {
						var data = JSON.parse(responseData);
					})
				});
			}

			function webShare() {
				if (navigator.share) { //有原生分享
					_this.shareFn(0);
					if (isSafari) {
						_this.safarib = true;
					} else {
						navigator.share({
							url: document.querySelector('link[rel=canonical]') ?
								document.querySelector('link[rel=canonical]').href : _this.shareLink,
							title: _this.appShare.title || _this.title,
							text: _this.appShare.title || _this.title,
						})
					}
				} else {
					uni.setClipboardData({
						data: `${_this.appShare.title || _this.title} ${_this.shareLink}`,
						success: res => {
							uni.hideToast();
							_this.copySuccessb = true; //弹窗
						}
					});
				}
				_this.shareconb = false;
			}
        },
        methods: {
            async massageFn() { //消息数据
                let data = {
                    service: 'member',
                    action: 'message',
                    type: 'tongji',
                    im: 1
                };
                let result =await this.$ajax.post({
                    url: app.encodeUrl('include/ajax.php?'),
                    data: data
                });
                if (result.data.state == 100) {
                    this.msgData = result.data.info.pageInfo;
                }
            },
            async getModuleNav() { //获取模块数据
				let data = {
					service: 'siteConfig',
					action: 'siteModule',
					type: 1
				};
				let result = await this.$ajax.post({
					url: 'include/ajax.php?',
					data: data
				});
                if (result.data.state == 100) {
					this.moduleData = result.data.info;
				}
			},
            popFn(state) { //弹窗
				if (state) { //显示
					this.popb = true;
					setTimeout(res => {
						this.popconb = true;
					}, 0);
				} else { //隐藏
					this.popconb = false;
					setTimeout(res => {
						this.popb = false;
					}, 220);
				}
			},
            linkTo(url,redirect=false,login=false,initial=false) { //redirect跳转 登录验证 原生跳转
				if(login&&!app.loginCheck()){ //登录验证
					return false
				}
				if(initial&&_this.appBoolean){ //原生地址
					// url=`${_this.masterDomain}/${_this.mold}`+url;
				}
				app.linkTo(url,redirect);
			},
            shareFn(state) { //分享弹窗
				if (state == 1) { //弹出
					this.shareb = true;
					this.popFn(0);
					setTimeout(res => {
						this.shareconb = true;
					}, 0);
				} else { //关闭
					this.shareconb = false;
					this.copySuccessb = false;
					setTimeout(res => {
						this.shareb = false;
					}, 200);
				}
			},
            qrCodeFn(state) { //二维码分享弹窗
				if (state == 0) {
					this.qrconb = false;
					setTimeout(res => {
						this.qrb = false;
					}, 220)
				} else {
					this.qrb = true;
					setTimeout(res => {
						this.qrconb = true;
					}, 0)
				}
			},
        },
        watch: {
			appShare: {
				deep: true,
				handler(newVal, oldVal) {
					let _this = this;
					document.querySelector('meta[property="og:title"]').setAttribute('content', newVal.title || _this
						.title);
					document.querySelector('meta[property="og:description"]').setAttribute('content', newVal.description ||
						'');
					if (newVal.litpic) {
						document.querySelector('meta[property="og:image"]').setAttribute('content', newVal.litpic);
					}
					if (!app.webWeixin) { //分享卡片的标题，如要修改，请加条件
						uni.setNavigationBarTitle({
							title: newVal.title || _this.title
						})
					}
				}
			}
		}
    }
</script>
<style>
	@import url("shareTop.css");
</style>